import React, {Component} from 'react'
import {Table, Input, Select, Button, Divider, Radio, Modal,List,Layout} from 'antd';
import ResultTable from '../component/Result_table';
import fetch from 'cross-fetch';
import ReactToPrint from 'react-to-print';
import {URL} from '../constant/Constant'
import {HeaderIcon,SearchName, SearchWapper,SearchBox} from './CaseStyle'



//企业名称选择框初始化
const {Header} = Layout;
const Option = Select.Option;
const provinceData = ['#','北京','天津','上海','重庆','新疆','西藏','宁夏','内蒙古','广西','黑龙江','吉林','辽宁','河北','山东','江苏','安徽',
    '浙江','福建','广东','海南','云南','贵州','四川','湖南','湖北','河南','山西','陕西','青海','江西','台湾','香港','澳门'];





class Case_search extends Component {
    constructor(props){
        super(props);
        this.state = {
            provinceValue:'',
            qiYeMCValue: '',
            pageNum:5,
            sheJiCNValue_max: 30000,
            sheJiCNValue_min: 0,
            shuLiaoRHValue_min: 0,
            shuLiaoRHValue_max: 30000,
            paiFangZKValue_min: 0,
            paiFangZKValue_max: 30000,
            // dataList: '',
            data: [],
            visible: false,
            resultData: []
        }
    }

    //企业名称方法
    onChangeQiYeMC = (e) => {
        this.setState({
            qiYeMCValue: e.target.value
        });
    }

    //企业名称选择器方法
    handleProvince = (value) => {
        this.setState({
            provinceValue: value
        })
    }

    //设计产能方法
    onChangesheJiCN_max = (e) => {
        this.setState({
            sheJiCNValue_max: e.target.value,
        });
    }
    onChangesheJiCN_min = (e) => {
        this.setState({
            sheJiCNValue_min: e.target.value,
        });
    }

    //可比熟料热耗方法
    onChangeShuLiaoRH_min = (e) => {
        this.setState({
            shuLiaoRHValue_min: e.target.value,
        });
    }
    onChangeShuLiaoRH_max = (e) => {
        this.setState({
            shuLiaoRHValue_max: e.target.value,
        });
    }

    //排放状况方法
    onChangePaiFangZK_min = (e) => {
        this.setState({
            paiFangZKValue_min: e.target.value,
        });

    }
    onChangePaiFangZK_max = (e) => {
        this.setState({
            paiFangZKValue_max: e.target.value,
        });
    }


    //查询按钮方法
    handleSearchInfo = () => {
        //获取企业名称
        const qiYeMCValue = this.state.qiYeMCValue;
        //获取企业区域
        const provinceValue = this.state.provinceValue;
        //获取设计产能
        const sheJiCNValue = this.state.sheJiCNValue;
        //获取可比熟料热耗
        const shuLiaoRHValue =this.state.shuLiaoRHValue;
        //获取排放状况
        const paiFangZKValue = this.state.paiFangZKValue;
        let formData = new FormData();
        formData.append('comp_name',qiYeMCValue);
        formData.append('comp_address',provinceValue);
        formData.append('design_power',sheJiCNValue);
        formData.append('hot_consume',shuLiaoRHValue);
        formData.append('paifang',paiFangZKValue);
        fetch(URL.urlRoot+'/questionnaires/diaoyan/query',{
            method : 'POST',
            body: formData,
            headers: {
                "Content-Type": "application/json",
                'Authorization': window.localStorage.authorization,
            }
        })
            .then((res) => {
                return res.json();
            }).then((res) => {
            console.log(res)
            const resData = res.data;
            this.setState({
                data: resData
            })
        }).catch(err => {
            console.log(err);
        })
    }

    // 初始化
    componentDidMount = () => {
        fetch(URL.urlRoot+'/questionnaires/diaoyan/all', {
            method : 'GET',
            headers: {
                "Content-Type": "application/json",
                'Authorization': window.localStorage.authorization,
            }
        })
            .then(res => {
                return res.json();
            })
            .then(res => {
                console.log(res);
                this.setState({
                    data: res.data
                })
            })
    }
    //查看按钮
    showModal = (i) => {
        const item = this.state.data[i];
        this.setState({
            visible: true,
            resultData: item,
        })
    }
    //控制modal的显示与隐藏
    handleOk = () => {
        this.setState({
            visible: false,
        })
    }
    handleCancel = () => {
        this.setState({
            visible: false,
        })
    }

    render() {
        // 企业区域


        // 表头
        const column = [
            {
                title: '企业名称',
                dataIndex: 'QYMC',
            },
            {
                title: '企业区域',
                dataIndex: 'QYQY',
            },
            {
                title: '设计规模',
                dataIndex: 'SJCN',
            },
            {
                title: '可比熟料热耗',
                dataIndex: 'KBSLRH',
            },
            {
                title: '排放状况',
                dataIndex: 'PFZK',
            },
            {
                title: '操作',
                dataIndex: 'CZ',
            },
        ]
        //表格数据填写
        const datas = [];
        const dataItem = this.state.data
        const len = dataItem.length;
        for(let i = 0; i < len; i++){
            datas.push({
                QYMC: dataItem[i].compname,
                QYQY: dataItem[i].compaddress,
                SJCN: dataItem[i].line_size,
                KBSLRH: dataItem[i].rehao,
                PFZK: dataItem[i].zyxh_slsc_yl1_name,
                CZ: <span>
                     <Button type={"primary"}  onClick = {() => this.showModal(i)} >查看</Button>
                </span>
            })
        }


        //企业名称选择器变量
        return (
            <HeaderIcon >
                <Header className='headerCase'>
                    <div className='whutIcon'>
                        <a href='/'>
                            <img src={require("../img/logo-whut.png")}/>
                            {/*"../../img/logo-whut.png"*/}
                        </a>
                    </div>
                </Header>
                <Divider  orientation="left">查询条件</Divider>
                <SearchWapper>
                    <SearchName>
                        省：
                    </SearchName>
                    <Select
                        defaultValue={provinceData[0]}
                        className='SearchWapper searchbox'
                        onChange={this.handleProvinceChange}
                    >
                        {provinceData.map((province, id) => (
                            <Option key={id}>{province}</Option>
                        ))}

                    </Select>
                </SearchWapper>
                <SearchWapper>
                    <SearchName>
                        企业名称：
                    </SearchName>
                    <SearchBox>
                        <Input
                            className="SearchBox searchbox"
                            value={this.state.qiYeMCValue}
                            onChange={this.onChangeQiYeMC}
                        />
                    </SearchBox>
                </SearchWapper>


                <Divider orientation="right"><Button type="primary"  onClick = {this.handleSearchInfo}>查询</Button></Divider>
                <Table columns = {column} dataSource = {datas} id = 'table'
                       pagination = {{
                           showSizeChanger : true,
                           defaultCurrent : 1,
                           defaultPageSize: 5,
                           total: len,
                       }}
                />
                <label><b>当前查询总数:{datas.length}</b></label>
                {/* 查看结果列表 */}
                <Modal
                    title="问卷信息"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width = '100%'
                    height = '100%'
                >
                    {/*<ResultTable data = {this.state.resultData} ref = {(el) => this.refs = el} />*/}
                    <ResultTable  groupData={this.state.resultData} />

                </Modal>
            </HeaderIcon>
        );
    }
}

export default Case_search;